<link rel="stylesheet" href="{{URL::asset('./css/news/news.css')}}">
<link rel="stylesheet" href="{{URL::asset('./css/news/newsDetails.css')}}">


@extends('home.layout.base')
@section('content')
<div class="main">
    <div>
        <div class="newsMain">
            <div class="newsBreadcrumb">
                <span>当前位置：</span>
                <span><a href="{{route('home.index.index') }}">首页</a> > <a href="{{route('home.news.news') }}">所有新闻资讯</a>> @{{detailsData.title}}</span>
            </div>
            <div class="newsContent">
                <div id="newsDetails" v-cloak>
                    <div class="newsDetails">
                        <div class="newsDetails_header">
                            <p class="title">@{{detailsData.title}}</p>
                            <div>
                                <span>来源：@{{detailsData.source}}</span>
                                <span>发布时间：@{{detailsData.created_at}}</span>
                                <span>收藏量：@{{detailsData.collect}}</span>
                                <span>浏览量：@{{detailsData.view}}</span>
                            </div>
                        </div>
                        <div class="newsDetails_content">
                            <div v-html="detailsData.content"></div>
                            <div class="detailLine"></div>
                            <div class="newsDetails_collect"  v-if="detailsData.is_collect==1" @click="loginBool(detailsData.id)">收藏文章</div>
                            <div class="newsDetails_collect active"  v-else @click="loginBool(detailsData.id)">收藏文章</div>
                        </div>
                    </div>
                </div>
                @include('home.news.newsHot')
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script>
    let newsBreadcrumb = new Vue({
        el: '.newsBreadcrumb',
        data: {
            detailsData: {}
        },
        created() {
            let data = {
                id: getQueryString("id")
            }
            apiAjax("{{ route('home.news.detailsApi')}}", 'get', data, (res) => {
                if (res.code == 0) {
                    this.detailsData = res.data
                } else {}
            }, (erro) => {});
        },
    })
    let newsDe = new Vue({
        el: '#newsDetails',
        data: {
            detailsData: {},
            a: 1
        },
        created() {
            this.getData();
        },
        methods: {
            getData() {
                let data = {
                    id: getQueryString("id")
                }
                apiAjax("{{ route('home.news.detailsApi')}}", 'get', data, (res) => {
                    if (res.code == 0) {
                        this.detailsData = res.data
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                }, (erro) => {});
            },
            //收藏
            loginBool(id) {
                let data = {
                    collect_id: id
                }
                apiAjax("{{ route('home.news.newsCollect')}}", 'post', data, (res) => {
                    if (res.code == 0) {
                        this.$message({
                            message: res.msg,
                            type: 'success'
                        });
                        this.getData();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });

                    }
                }, (erro) => {

                });
                // sessionStorage.setItem("loginBool",true)
            }
        }
    })
</script>
@endsection